import React, { useRef, useState, useEffect } from 'react';
import { EllipsisOutlined } from '@ant-design/icons';
import { Button, Divider, Space, Tour } from 'antd';
const App = () => {
    const ref1 = useRef(null);
    const ref2 = useRef(null);
    const ref3 = useRef(null);
    const [open, setOpen] = useState(false);
    const [current, setcurrent] = useState(0);


    const steps = [
        {
            title: 'Upload File',
            description: '第一步',
            cover: (
                <div>123</div>
            ),
            target: () => ref1.current,
            nextButtonProps: {
                children: '下一步',
                type: 'primary',
                onClick: () => {
                    setcurrent(1);
                }
            },
        },
        {
            title: 'Save',
            description: '第二步',
            target: () => ref2.current,
            nextButtonProps: {
                children: '下一步',
                type: 'primary',
                onClick: () => {
                    setcurrent(2);
                }
            },
            prevButtonProps: {
                children: '上一步',
                onClick: () => {
                    setcurrent(0);
                }
            }
        },
        {
            title: 'Other Actions',
            description: '最后一步',
            target: () => ref3.current,
            // 使用nextButtonProps属性修改按钮文字显示
            nextButtonProps: {
                children: '完成',
                type: 'primary',
                onClick: () => {
                    setcurrent(0);
                }
            },
            prevButtonProps: {
                children: '上一步',
                onClick: () => {
                    setcurrent(1);
                }
            }
        },
    ];

    const indicatorsRender = (currentStep) => (
        <div style={{ textAlign: 'center' }}>
            {steps.map((step, index) => (
                <span
                    key={index}
                    style={{
                        display: 'inline-block',
                        width: 10,
                        height: 10,
                        borderRadius: '50%',
                        background: currentStep === index ? '#1890ff' : '#ccc',
                        margin: '0 5px',
                        cursor: 'pointer',
                    }}
                    onClick={() => setcurrent(index)}
                />
            ))}
        </div>
    );

    const wBox = {
        marginLeft: '300px'
    }
    return (
        <>
            <div style={wBox}>
                <Button type="primary" onClick={() => setOpen(true)}>
                    Begin Tour
                </Button>
                <Divider />
                <Space>
                    <Button ref={ref1}> Upload</Button>
                    <Button ref={ref2} type="primary">
                        Save
                    </Button>
                    <Button ref={ref3} icon={<EllipsisOutlined />} />
                </Space>
                <Tour open={open} onClose={() => setOpen(false)} steps={steps} indicatorsRender={indicatorsRender} current={current} />
            </div>
        </>
    );
};
export default App;